<template>
  <div class="knowledge-base">
    <!-- 标题 -->
    <h1>学习指南</h1>

    <!-- 知识点卡片 -->
    <div class="card" v-for="(item, index) in knowledgePoints" :key="index">
      <h2>{{ item.title }}</h2>
      <p>{{ item.description }}</p>
      <!-- 示例代码或交互（这里简化处理） -->
      <pre v-if="item.code">{{ item.code }}</pre>
    </div>

    <!-- 演示Axios请求的例子 -->
    <div class="card">
      <h2>Axios 请求演示</h2>
      <button @click="fetchData">点击发起请求</button>
      <p v-if="apiResponse">{{ apiResponse }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      knowledgePoints: [
        {
          title: "掌握大觅项目环境搭建",
          description: "包括Node.js、npm安装，项目初始化等。",
          code: `# 安装Vue CLI\nnpm install -g @vue/cli\n# 创建新项目\nvue create my-project`
        },
        {
          title: "掌握Vue.js框架常用API",
          description: "理解生命周期钩子、计算属性、侦听器等核心概念。",
          code: `export default {\n  // 生命周期钩子\n  created() { console.log('实例已创建') }\n}`
        },
        {
          title: "掌握大觅项目使用的插件",
          description: "如Axios、Vue Router、Vuex等插件的使用。",
          code: `// 在main.js中引入\nimport VueRouter from 'vue-router';\nVue.use(VueRouter);`
        },
        {
          title: "实现大觅项目的开发",
          description: "从需求分析到编码实现，再到调试优化和部署上线的完整流程。",
          code: `// 简单的项目结构\nsrc/\n├── assets/\n├── components/\n├── views/\n└── App.vue`
        }
      ],
      apiResponse: null
    };
  },
  methods: {
    fetchData() {
      axios.get('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => {
          this.apiResponse = response.data.title;
        })
        .catch(error => {
          console.error("请求失败:", error);
          this.apiResponse = "请求出错";
        });
    }
  }
};
</script>

<style scoped>
.knowledge-base {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.card h2 {
  color: #333;
}

pre {
  background-color: #eaeaea;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}
</style>